<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="if-example">
			<!-- v-if  v-else 必须紧接着v-if后面否则不被识别 -->
			<h1 v-if="awesome">Vue is awesome</h1>
			<h1 v-else>Oh no</h1>
			<!-- template 元素上使用v-if 条件渲染 可以包含一大段 -->
			<template v-if="ok">
				<h1>title</h1>
				<p>p1</p>
				<p>p2</p>
			</template>
			
			
			<div v-if="Math.random() > 0.5">
				Now you see me
			</div>
			<div v-else>
				Now you don`t
			</div>
			
			<!-- 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。 -->
			<div v-if="type==='A'">
				A
			</div>
			<div v-else-if="type==='B'">
				B
			</div>
			<div v-else-if="type==='C'">
				C
			</div>
			<div v-else>
				Not A/B/C
			</div>
		</div>	
		<script type="text/javascript">
			let app=new Vue({
				el:'#if-example',
				data:{
					awesome:true,
					ok:true,
					type:'A'
				}
			})
			app.awesome=false;
		</script>	
		<style type="text/css">
			
		</style>
	</body>
</html>
